<template>
  <div id="app">
    <router-link :to="{path:'/home'}" tag="div" class="link">首页</router-link>
    <router-link to='/news' tag="div" class="link">新闻</router-link>
    <router-link to='/user' tag="div" class="link">用户</router-link>
    <button @click="$router.back()">返回上页</button>
    <button @click="$router.forward()">下一页</button>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
    
  },
  
}
</script>

<style>
  .link{
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border: 1px solid;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: skyblue;
    border-radius: 10px;
    cursor: pointer;
  }
  link:hover{
    opacity: 0.9;
  }
  .active{
    background-color: rgb(177, 4, 33);
  }
</style>
